<template>
  <a-layout>
    <a-layout>
      <a-layout-sider width="200" collapsible>
        <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" theme="dark" mode="inline">
          <a-sub-menu key="sub1">
            <template #title>
              <span> 项目 </span>
            </template>
            <a-menu-item key="1"><Nuxt-Link class="a-link" to="/project"> 全部项目 </Nuxt-Link></a-menu-item>
            <a-menu-item key="2"><Nuxt-Link class="a-link" to="/widget"> 我的组件 </Nuxt-Link></a-menu-item>
          </a-sub-menu>
          <a-menu-item key="logout">退出</a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-content :style="{ minHeight: '100vh' }"> Content </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { UserOutlined, LaptopOutlined, NotificationOutlined } from "@ant-design/icons-vue";
  const selectedKeys1 = ref<string[]>(["2"]);
  const selectedKeys2 = ref<string[]>(["1"]);
  const openKeys = ref<string[]>(["sub1"]);
</script>
<style scoped>
  #components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
  }

  .ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
  }

  .site-layout-background {
    background: #fff;
  }
</style>
